<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue学习</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 数据绑定方式，它会对html进行转义输出 -->
      <div>{{ title }}</div>
      <!-- 
        v-text: 用于显示声明的变量数据，对数据中的html进行转义输出,和数据绑定效果一样
          + 使用它优点在于在数据加载过慢时，不会出来花括号闪现问题
        v-html: 用于显示的变量数据，对数据中的html进行解析输出
          + 使用它优点在于在数据加载过慢时，不会出来花括号闪现问题
          + 它会存在xss攻击安全
          + xss攻击：跨站脚本攻击，是一种代码注入攻击，攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行
       -->
      <div v-text="title"></div>
      <div v-html="title"></div>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            // title: '<h3>你好我是一个vue的标题</h3>'
            title:
              '<iframe src="http://ts.1314000.cn/" frameborder="0" width="100%" height="600"></iframe>'
          }
        }
      })
      // setTimeout(() => {
      app.mount('#app')
      // }, 3000);
    </script>
  </body>
</html>
